<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

    <head  th:fragment="header">
        <meta charset="utf-8"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>MECorp Report Management</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- Bootstrap -->
        <link href="" th:href="@{/admin/media/css/smoothness/jquery-ui-1.10.1.custom.min.css}" rel="stylesheet" media="screen"/>
        <link href="" th:href="@{/admin/media/css/bootstrap.min.css}" rel="stylesheet" media="screen"/>
        <link href="" th:href="@{/admin/media/css/jquery.dataTables.css}" rel="stylesheet" media="screen"/>
        <link href="" th:href="@{/admin/media/css/jquery.dataTables_themeroller.css}" rel="stylesheet" media="screen"/>
        <link href="" th:href="@{/admin/media/css/jquery-ui-timepicker-addon.css}" rel="stylesheet" media="screen"/>
        <link href="" th:href="@{/admin/media/css/validationEngine.jquery.css}" rel="stylesheet" media="screen"/>
        <link href="" th:href="@{/admin/media/css/application.css}" rel="stylesheet" media="screen"/>
        <style type="text/css">
            body {
                padding-top: 20px;
                padding-bottom: 60px;

                /*css scrollbar*/
                scrollbar-3dlight-color:#CDCDCD;
                scrollbar-arrow-color:#FFFFFF;
                scrollbar-base-color:#EFEFEF;
                scrollbar-darkshadow-color:#CDCDCD;
                scrollbar-face-color:#CDCDCD;
                scrollbar-highlight-color:#EFEFEF;
                scrollbar-shadow-color:#CDCDCD;
            }

            /*web-kit*/
            ::-webkit-scrollbar {
                background-color:#EFEFEF;
                padding:0;
                width:5px;
            }
            /* UP, DOWN, LEFT and RIGHT button styling */
            ::-webkit-scrollbar-button:hover {
                background-color:#DBDBDB !important;
            }
            ::-webkit-scrollbar-button:vertical:decrement {
                background:url(../img/up.png) no-repeat center;
            }
            ::-webkit-scrollbar-button:vertical:increment {
                background:url(../img/down.png) no-repeat center;
            }
            ::-webkit-scrollbar-button:horizontal:decrement {
                background:url(../img/left.png) no-repeat center;
            }
            ::-webkit-scrollbar-button:horizontal:increment {
                background:url(../img/right.png) no-repeat center;
            }
            ::-webkit-scrollbar-button:active:vertical:decrement {
                background:url(../img/up-active.png) no-repeat center #606060 !important;
            }
            ::-webkit-scrollbar-button:active:vertical:increment {
                background:url(../img/down-active.png) no-repeat center #606060 !important;
            }
            ::-webkit-scrollbar-button:active:horizontal:decrement {
                background:url(../img/left-active.png) no-repeat center #606060 !important;
            }
            ::-webkit-scrollbar-button:active:horizontal:increment {
                background:url(../img/right-active.png) no-repeat center #606060 !important;
            }
            /* Scrollbar thumb */
            ::-webkit-scrollbar-thumb {
                background-color:#CDCDCD;

            }
            ::-webkit-scrollbar-thumb:hover {
                background-color:#A6A6A6;

            }
            ::-webkit-scrollbar-thumb:active {
                background-color:#606060;
            }
            /* Sidenav for Docs
 -------------------------------------------------- */

            .inside-list {
                overflow-y: scroll;  
                margin-left: -15px;
            }
            
            .list-header {
                background-color: #08c;
                display: block;
                height: 25px;
                padding: 8px 14px;
                border: 1px solid #e5e5e5;
                font-family: sans-serif;
                font-size: 17px;
                color:#FFFFFF;
                -webkit-border-radius: 6px 6px 0 0;
                -moz-border-radius: 6px 6px 0 0;
                border-radius: 6px 6px 0 0;
            }

            .outside-list {
                margin-left: -30px;
            }

            .bs-docs-sidenav {
                width: 300px;
                background-color: #fff;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                border-radius: 6px;
                -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
                -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
                box-shadow: 0 1px 4px rgba(0,0,0,.065);    
                height: 600px;
            }
            .bs-docs-sidenav > li{
                display: block;
                height: 25px;
                padding: 8px 14px;
                border: 1px solid #e5e5e5;
                cursor: pointer;
                font-family: sans-serif;
                font-size: 17px;
            }

            .bs-docs-sidenav > li:last-child{
                -webkit-border-radius: 0 0 6px 6px;
                -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
            }
            .bs-docs-sidenav > .active{
                position: relative;
                z-index: 2;
                padding: 9px 15px;
                border: 0;
                text-shadow: 0 1px 0 rgba(0,0,0,.15);
                -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
                -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
                box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
            }
            /* Chevrons */
            .bs-docs-sidenav .icon-chevron-right {
                float: right;
                margin-top: 2px;
                opacity: .25;
            }
            .inside-list > li:hover {
                background-color: #f5f5f5;
            }
            .bs-docs-sidenav a:hover .icon-chevron-right {
                opacity: .5;
            }

            .bs-docs-sidenav > li:visited {
                background: #0077b3;
            }

            .bs-docs-sidenav .active .icon-chevron-right,
            .bs-docs-sidenav .active li:hover .icon-chevron-right {
                background-image: url(../img/glyphicons-halflings-white.png);
                opacity: 1;
            }

            .report-viewer{
                margin-left: 300px;
                min-height: 600px;
            }

            .modify-control {
                width: 100%;
                min-height: 300px;
                margin-right: 0;
                margin-left:  0;
                resize: vertical;
            }

            /* Custom container */

            .container-fluid {
                max-width: 1100px;
                margin: auto;
            }

            .container {
                margin: 0 auto;
                max-width: 1000px;
            }
            .container > hr {
                margin: 60px 0;
            }

            /* Main marketing message and sign up button */
            .jumbotron {
                margin: 80px 0;
                text-align: center;
            }
            .jumbotron h1 {
                font-size: 100px;
                line-height: 1;
            }
            .jumbotron .lead {
                font-size: 24px;
                line-height: 1.25;
            }
            .jumbotron .btn {
                font-size: 21px;
                padding: 14px 24px;
            }

            /* Supporting marketing content */
            .marketing {
                margin: 60px 0;
            }
            .marketing p + h4 {
                margin-top: 28px;
            }


            /* Customize the navbar links to be fill the entire space of the .navbar */
            .navbar .navbar-inner {
                padding: 0;
            }
            .navbar .nav {
                margin: 0;
                display: table;
                width: 100%;
            }
            .navbar .nav li {
                display: table-cell;
                width: 1%;
                float: none;
            }
            .navbar .nav li a {
                font-weight: bold;
                text-align: center;
                border-left: 1px solid rgba(255,255,255,.75);
                border-right: 1px solid rgba(0,0,0,.1);
            }
            .navbar .nav li:first-child a {
                border-left: 0;
                border-radius: 3px 0 0 3px;
            }
            .navbar .nav li:last-child a {
                border-right: 0;
                border-radius: 0 3px 3px 0;
            }
            #footer{
                margin-top: 60px;
            }
        </style>
        <link href="" th:href="@{/admin/media/css/bootstrap-responsive.min.css}" rel="stylesheet" media="screen" />

        <script src="media/js/jquery.js" th:src="@{/admin/media/js/jquery-1.9.1.js}"></script>
        <script src="media/js/jquery.js" th:src="@{/admin/media/js/jquery.dataTables.min.js}"></script>
        <script src="" th:src="@{/admin/media/js/jquery-ui-1.10.1.custom.min.js}"></script>
        <script src="" th:src="@{/admin/media/js/jquery-ui-timepicker-addon.js}"></script>
        <script src="" th:src="@{/admin/media/js/bootstrap.min.js}"></script>
        <script src="" th:src="@{/admin/media/js/jquery.validationEngine.js}"></script>
        <script src="" th:src="@{/admin/media/js/jquery.validationEngine-vi.js}"></script>
        <script src="" th:src="@{/admin/media/js/jquery.timer.js}"></script>
        <script src="" th:src="@{/admin/media/js/application.js}"></script>

    </head>    
    <body>
        <div th:fragment="nav" class="masthead" id="masthead">
            <h3 class="muted">MECorp Report Management</h3>
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <ul class="nav">
                            <li class="active " id="home_nav"><a href="#" >Home</a></li>
                            <li id="report_nav" class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Report <b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                    <li tabindex="-1"><a href="#" th:href="@{/admin/report}">View</a></li>
                                    <li sec:authorize="hasRole('ROLE_EDIT')" tabindex="-1"><a href="#" th:href="@{/admin/report/action/add}">Add</a></li>
                                </ul>
                            </li>
                            <li><a href="admin/logout" th:href="@{/admin/logout}">Logout</a></li>
                        </ul>
                    </div>
                </div>
            </div><!-- /.navbar -->
        </div>
        <footer th:fragment="footer">
            <hr/>
            <p class="pull-right">Copyright © 2013</p>
        </footer>
    </body>
</html>